import {createContext, Dispatch, SetStateAction, useState} from 'react'


interface Props {
  children: any
}

const initialState = {
  counter01: 0,
  counter02: 0,
  counter03: 0
}

type State = typeof initialState

interface Value extends State {
  setCounter01: Dispatch<any>,
  setCounter02: Dispatch<any>,
  setCounter03: Dispatch<any>
}

export const context = createContext<Value>(initialState as Value)

export default function Provider(props: Props) {
  const [state, setState] = useState(initialState)

  const value = {
    ...state,
    setCounter01: (value: number) => setState({...state, counter01: value}),
    setCounter02: (value: number) => setState({...state, counter02: value}),
    setCounter03: (value: number) => setState({...state, counter03: value})
  }

  return (
    <context.Provider value={value}>
      {props.children}
    </context.Provider>
  )
}